<template>
  <div class="detail-wrap">
    <div class="flow-begin distance">
      <div class="hook-box"><img src="../../assets/img/icon_1.png" class="hook" onclick="return false"/></div>
      <div class="tip">发起提现申请</div>
      <div class="with-time">{{startTime | format}}</div>
    </div>
    <div class="line-box">
      <div class="active"></div>
    </div>

    <div class="flow-begin">
      <div class="hook-box"><img :src="fork1" class="hook" onclick="return false"/></div>
      <div class="tip word" :class="{'midway':status == 2}">银行处理中</div>
      <div class="with-time"><span v-if="status == 2">{{middleTime | format}}</span></div>
    </div>
    <div class="line-box">
      <div class="line" :class="{'active':status == 2 || status == 3 || status == 4}"></div>
      <!--<div class="line-title dist1" v-show="tip == 1 || tip == 2">财务处理提现，已提交到银行进行转账</div>-->
    </div>

    <div class="flow-begin">
      <div class="hook-box"><img :src="fork2" class="hook" onclick="return false"/></div>
      <div class="tip word" :class="{'midway':status == 3 || status == 4}">
        <span v-if="status==4">到账失败</span><span v-else>到账成功</span></div>
      <div class="with-time"><span v-if="status == 3 || status == 4">{{middleTime | format}}</span></div>
    </div>
    <div class="line-box">
      <div class="line-title dist2" v-show="tip == 1">银行已完成转账处理，请您留意银行到账短信通知</div>
      <div class="line-title dist2" v-show="tip == 2">{{errorRemark}}</div>
    </div>

    <div class="bank-box">
      <div class="bank-con1">
        <span class="title1">提现金额</span>
        <div class="info-box">
          <span class="gain-money">￥{{intoAccount}}</span>
          <span class="tip-money">手续费{{chargeMoney}}元，实际到账{{money}}元</span>
        </div>
      </div>
      <div class="bank-con2">
        <span class="title" v-text="bankName"></span>
        <div class="info">尾号<span v-text="tailNum"></span></div>
      </div>
    </div>

    <div class="tips">预计到账时间2小时内</div>
  </div>
</template>

<script>
  import {formatDate, getSessionStore, toDecimal} from "../../config/util"
  import {Base64} from 'js-base64'
  import {baseUrl} from "../../config/env"

  export default {
    data() {
      return {
        userSign: "",
        money: "",
        bankName: "",
        tailNum: "",
        status: "",
        startTime: "",
        middleTime: "",
        fork1: require("./fork.png"),
        fork2: require("./fork.png"),
        tip: 0,
        intoAccount: "",
        chargeMoney: "",
        errorRemark: ""
      }
    },
    mounted() {
      this.userSign = Base64.decode(getSessionStore("openid"));
      this.queryBillDetail();
    },
    methods: {
      queryBillDetail() {//查询账单详情
        this.axios.get(baseUrl + "/billrecord/query_withdrawrecord?id=" + this.$route.query.id + "&type=2" + "&sgin=" + this.userSign + "&versionType=2.3").then((res) => {
          let detailObj = res.data;
          if (detailObj.code == 0 && detailObj.data != null) {
            this.money = toDecimal(detailObj.data.money);
            this.bankName = detailObj.data.bankName;
            this.tailNum = detailObj.data.bankNum;
            this.status = detailObj.data.status;//1提现申请2银行接受处理3银行处理成功4银行转账失败
            this.startTime = detailObj.data.time;
            this.chargeMoney = toDecimal(detailObj.data.chargeMoney);
            this.intoAccount = toDecimal(Number(this.money) + Number(this.chargeMoney));

            if (this.status == 2 || this.status == 3 || this.status == 4) {
              this.middleTime = detailObj.data.set_time;
              this.fork1 = require("../../assets/img/icon_1.png");
              if (this.status == 3) {//成功
                this.tip = 1;
                this.fork2 = require("../../assets/img/icon_1.png");
              }
              if (this.status == 4) {//失败
                this.tip = 2;
                this.errorRemark = detailObj.data.errorRemark;
                this.fork2 = require("../../assets/img/icon_2.png");
              }
            }
          } else {
            this.$vux.toast.text(detailObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      },
    }
  }
</script>

<style lang="stylus" scoped>
  .detail-wrap
    display: flex
    flex-direction: column
    width: 100%
    height: 100%
    .flow-begin
      display: flex
      justify-content: space-between
      align-items: center
      width: 100%
      height: 0.453rem
      .hook-box
        margin-left: 5%
        width: 0.533rem
        height: 0.533rem
        .hook
          width: 100%
          height: 100%
      .tip
        margin-right: auto
        margin-left: 0.267rem
        font-size: 0.48rem
        color: rgba(27, 27, 27, 1)
      .word
        color: rgba(102, 102, 102, 1)
      .midway
        color: rgba(27, 27, 27, 1)
      .with-time
        margin-right: 5%
        font-size: 0.293rem
        color: rgba(102, 102, 102, 1)
    .distance
      margin-top: 0.573rem
    .line-box
      display: flex
      justify-content: start
      width: 90%
      height: 2.96rem
      margin 0 auto
      .line
        width: 0.04rem
        height: 100%
        background: rgba(197, 197, 197, 1)
        margin-left: 0.245rem
      .active
        width: 0.04rem
        height: 100%
        margin-left: 0.245rem
        background: rgb(60, 175, 255)
      .line-title
        font-size: 0.347rem
        color: rgba(153, 153, 153, 1)
        margin-top: 0.28rem
      .dist1
        margin-left: 0.53rem
      .dist2
        margin-left: 0.82rem
    .flow-end
      margin-top: 0rem
      margin-bottom: 3.2rem
    .bank-box
      margin: 0 auto
      width: 93.6%
      height: 3.013rem
      background: rgba(60, 175, 255, 1)
      border-radius: 0.173rem
      margin-bottom: 0.6rem
      .bank-con1
        display: flex
        width: 8.8rem
        height: 1.733rem
        color: #FFFFFF
        margin: 0 auto
        border-bottom: 0.027rem solid rgba(238, 238, 238, 1)
        .title1
          padding-top: 0.4rem
          margin-left: 0.267rem
          font-size: 0.44rem
        .info-box
          display: flex
          flex-direction: column
          font-size: 0.44rem
          margin-left: auto
          .gain-money
            padding-top: 0.4rem
            padding-bottom: 0.213rem
            text-align: right
          .tip-money
            font-size: 0.333rem
      .bank-con2
        display: flex
        align-items: center
        width: 8.8rem
        height: 1.28rem
        color: #FFFFFF
        margin: 0 auto
        .info
          margin-left: auto
          margin-right: 0.267rem
          font-size: 0.44rem
        .title
          margin-left: 0.267rem
          font-size: 0.44rem
    .tips
      display: flex
      justify-content: center
      font-size: 0.44rem
      color: rgba(102, 102, 102, 1)
</style>



